<template>
<div class="table-body">
  <el-table :data="roleList">
    <el-table-column label="Warming Type" prop="roleId"/>
    <el-table-column label="Data" prop="roleName" />
    <el-table-column label="Value" prop="roleKey" />
    <el-table-column label="Time" prop="time" />
    <el-table-column label="Task Result" prop="roleSort" width="200">
      <template slot-scope="scope">
          <el-progress :percentage="scope.row.progress" :format="format" :color="scope.row.type"></el-progress>
      </template>
    </el-table-column>
    <el-table-column label="operate" prop="roleSort" width="110">
      <template slot-scope="scope">
        <el-link>Try again</el-link>
      </template>
    </el-table-column>
  </el-table>

  <pagination
    v-show="total>0"
    :total="total"
    :page.sync="queryParams.pageNum"
    :limit.sync="queryParams.pageSize"
    @pagination="getList"
  />
</div>
</template>

<script>
export default {
  name: "tabWarning",
  data(){
    return{
      roleList: [{
        progress: 50,
        type: 'rgb(0, 84, 254)',
        time: '2023-01-09'
      },
        {
          progress: 50,
          type: 'rgb(251, 73, 124)',
          time: '2023-01-09'
        },
        {
          progress: 100,
          type: 'rgb(67, 207, 124)',
          time: '2023-01-09'
        }],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        roleName: undefined,
        roleKey: undefined,
        status: undefined
      },
    }
  },
  methods:{
    format(percentage) {
      return percentage === 100 ? 'success' : `${percentage}%`;
    },
    getList(){

    }
  }
}
</script>

<style scoped>
.table-body{
  background: #fff;
  padding: 10px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
  border: 1px solid #e6ebf5;
  border-radius: 5px;
}
</style>
